import { reactive, ref, defineComponent } from 'vue'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import './style/buttonGrounp.less'

interface ButtonTextMap {
  AND: string
  OR: string
}

export default defineComponent({
  name: 'AddConditionButton',
  props: {
    buttonType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    // 页面按钮可显示的map
    const buttonTextMap: ButtonTextMap = reactive({
      AND: `添加${props.buttonType}(且)`,
      OR: `添加${props.buttonType}(或)`
    })
    // 页面按钮可选择的map
    const optionsMap: ButtonTextMap = reactive({
      AND: `且${props.buttonType}`,
      OR: `或${props.buttonType}`
    })
    const selectedType = ref('AND')
    // 点击弹出选择框
    const handleButtonClick = () => {
      emit('click', selectedType.value)
    }
    // 点击选择类型 and / or
    const handleMenuClick = currentOption => {
      selectedType.value = currentOption.key
      emit('click', selectedType.value)
    }

    // 下拉菜单
    const menu = (
      <aMenu onClick={handleMenuClick}>
        {Object.keys(optionsMap).map((key: string) => (
          <aMenuItem key={key}>
            <span class={['menu-item', selectedType.value === key ? 'menu-item-active' : '']}>{optionsMap[key]}</span>
          </aMenuItem>
        ))}
      </aMenu>
    )
    return () => (
      <div>
        <aDropdownButton onClick={handleButtonClick} overlay={menu} icon={<CaretDownOutlined />} trigger="click">
          <span>{buttonTextMap[selectedType.value]}</span>
        </aDropdownButton>
      </div>
    )
  }
})
